<template>
  <div>
    <div class="boxs">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="" prop="name">
          <el-input
            v-model="ruleForm.name"
            type="text"
            autocomplete="off"
            placeholder="账号"
          />
        </el-form-item>
        <el-form-item label="" prop="pwd">
          <el-input
            v-model="ruleForm.pwd"
            type="password"
            autocomplete="off"
            placeholder="密码"
          />
        </el-form-item>
        <el-form-item label="" prop="captcha">
          <el-input
            v-model="ruleForm.captcha"
            type="text"
            autocomplete="off"
            placeholder="验证码"
            class="yzm"
          />
          <span v-html="yzm" @click="render()"></span>
        </el-form-item>
        <p class="zhuce"><a href="/">已有账号，点击登录</a></p>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
    
    <script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { login, getcaptcha, register } from "../../api/MenuApi";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const ruleFormRef = ref<FormInstance>();

// 验证码
const yzm = ref("");

onMounted(() => {
  render();
});

const render = () => {
  getcaptcha().then((res) => {
    yzm.value = res.data;
  });
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入用户名"));
  } else {
    if (ruleForm.name !== "") {
      if (!ruleFormRef.value) return;
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== ruleForm.pwd) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

const validatePass3 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入验证码"));
  } else {
    callback();
  }
};

// 表单数据
const ruleForm = reactive({
  name: "",
  pwd: "",
  captcha: "",
});

const rules = reactive<FormRules>({
  name: [{ validator: validatePass, trigger: "blur" }],
  pwd: [{ validator: validatePass2, trigger: "blur" }],
  captcha: [{ validator: validatePass3, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      // 点击注册执行的函数
      register(ruleForm).then((res) => {
        console.log(res);
        if (res.data.code == 5) {
          ElMessage({
            message: "用户已存在",
            type: "warning",
          });
        }
        if (res.data.code == 0) {
          ElMessage({
            message: "验证码不正确",
            type: "warning",
          });
        }
        if (res.data.code == 6) {
          ElMessage({
            message: "注册成功",
            type: "success",
          });
          router.push("/");
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
  <style scoped>
.boxs {
  width: 500px;
  height: 200px;
  /* border: 1px solid #ccc; */
  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 280px);
}
.el-button,
.el-input {
  width: 400px;
  height: 40px;
}
.zhuce {
  text-align: right;
  color: #409eff;
}
a {
  color: #409eff;
  text-decoration: none;
}
.yzm {
  width: 250px;
}
</style>